import { Routes, Route, useNavigate, NavLink,useParams, Link,Outlet,useSearchParams,useLocation } from "react-router-dom";
import React,{ useEffect } from "react";

export default function App() {
  // 通过路径传递参数，跳转的时候传递参数
  return (
    <div className="App">
      <h1>Welcome to React Router!</h1>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />}>
          {/* 通配符接收参数 */}
          <Route path=":id" element={<Detail />} />
        </Route>
      </Routes>
    </div>
  );
}

function About() {
  // 接收search参数
  const [searchParams] = useSearchParams();
  console.log(searchParams.get("name"),searchParams.get("age"));

  const arr = [{id:1},{id:2}]
  return (
    <>
      <main>
        <h2>Who are we?</h2>
        <p>That feels like an existential question, don't you think?</p>
      </main>
      <nav>
        {arr.map(_i => (<Link key={_i.id} to={`/about/${_i.id}`}>跳转到{_i.id}</Link>))}
        <Outlet/>
        {/* 传递state参数 */}
        <Link to="/" state={{name:"state",age:18}}>Home</Link>
      </nav>
    </>
  );
}

function Detail(){
  const params = useParams();
  useEffect(()=>{
    console.log(params);
  },[])

  return (
    <>
    <h2>id:{params.id}</h2>
    </>
  )
}

function Home() {
  // 接收state参数
  const {state:{name,age}} = useLocation()
  console.log("name",name,"age",age);
  return (
    <>
      <main>
        <h2>Welcome to the homepage!</h2>
        <p>You can do this, I believe in you.</p>
      </main>
      <nav>
        {/* 传递search参数 */}
        <Link to="/about?name=search&age=18">About</Link>
      </nav>
    </>
  );
}
